<template>
    <div class="login" ref="fullHeightElement">
        <div class="content">
            <h1>欢迎登录助农扶贫系统</h1>
            <el-form status-icon :label-position="labelPosition" :model="form" ref="ruleForm" :rules="rules">
                <el-form-item prop="userAccount">
                    <el-input v-model="form.userAccount" placeholder="请输入账号" size="small">
                        <i slot="prefix" class="el-input__icon el-icon-user"></i>
                    </el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input v-model="form.password" type="password" placeholder="请输入密码" size="small">
                        <i slot="prefix" class="el-input__icon el-icon-lock"></i>
                    </el-input>
                </el-form-item>
                <!-- <el-form-item prop="type">
                    <el-select v-model="form.type" placeholder="请选择角色" size="small">
                        <el-option label="管理员" value="0"></el-option>
                        <el-option label="普通用户" value="1"></el-option>
                    </el-select>
                </el-form-item> -->
            </el-form>
            <el-button type="primary" size="small" :disabled="isDisabled" @click="login('ruleForm')">登录</el-button>
            <!-- <p>没有帐户？<span @click="goRegister">注册</span></p> -->
        </div>
    </div>
</template>
<script>
import { mapMutations } from 'vuex'
export default {
    name: 'Login',
    components: {

    },
    mixins: [],
    props: {

    },
    data() {
        const checkUserAccount = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入账号'));
            } else {
                // if (this.form.userAccount !== '') {
                //     this.$refs.ruleForm.validateField('userAccount');
                // }
                callback();
            }
        };
        const checkPassword = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入密码'));
            } else {
                // if (this.form.password !== '') {
                //     this.$refs.ruleForm.validateField('password');
                // }
                callback();
            }
        };
        const checkType = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请选择角色'));
            } else {
                if (this.form.type !== '') {
                    this.$refs.ruleForm.validateField('type');
                }
                callback();
            }
        };
        return {
            labelPosition: 'right',
            form: {
                userAccount: 'admin',
                password: '123456',
                type: '0'
            },
            baseHeight: 1,
            isDisabled: false,
            rules: {
                userAccount: [{ validator: checkUserAccount, trigger: 'change' }],
                password: [{ validator: checkPassword, trigger: 'change' }],
                // type: [{ validator: checkType, trigger: 'blur' }]
            }
        }
    },
    computed: {

    },
    watch: {

    },
    mounted() {
        this.clearLocalStorage()
        // this.getHeight()
    },
    methods: {
        ...mapMutations('userStore', ['userLogin']),
        getHeight() {
            // 设置元素高度为窗口高度
            this.$refs.fullHeightElement.style.height = `${window.innerHeight - this.baseHeight}px`;

            // 添加窗口大小改变的监听
            window.addEventListener('resize', this.handleResize);
        },
        handleResize() {
            this.$refs.fullHeightElement.style.height = `${window.innerHeight}px`;
        },
        login(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.userLogin(this.form)

                } else {
                    return false;
                }
            });

        },
        goRegister() {
            this.$router.push('/register')
        },
        clearLocalStorage() {
            localStorage.clear();
        }
    },
    beforeDestroy() {
        // 清除监听
        window.removeEventListener('resize', this.handleResize);
    },

};
</script>
<style lang='less' scoped>
.login {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .content {
        width: 400px;
        height: 300px;
        border-radius: 5px;
        border: 1px solid #11A983;
        padding: 20px 40px;

        h1 {
            width: 100%;
            text-align: center;
            padding-bottom: 20px;
            font-weight: 550;
            color: #333;
        }

        .el-form-item {
            margin-bottom: 12px !important;

            .el-select {
                width: 100%;

            }


        }

        .el-button--primary {
            width: 100%;
            background-color: rgb(40 130 107);
            color: white;
            margin-top: 10px;
        }

        p {
            float: right;
            font-size: 12px;
            color: rgb(119, 118, 118);
            margin-top: 10px;

            span {
                cursor: pointer;
                color: rgb(10, 148, 203);
            }

            span:hover {
                text-decoration: underline;
            }
        }
    }
}
</style>